<template>
  <div class="terms-container">
    <!-- 顶部返回按钮 -->
    <div class="top-bar">
      <button @click="handleBack" class="back-btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="22"
          height="22"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round">
          <path d="m12 19-7-7 7-7" />
          <path d="M19 12H5" />
        </svg>
        <span class="back-text">Back</span>
      </button>
    </div>

    <!-- 隐私政策内容区 -->
    <main class="terms-content">
      <div class="terms-update">Last Updated: October 30, 2025</div>
      <div class="terms-intro">
        Your privacy is important to us. This Privacy Policy explains how Nexbie ("we," "us," or
        "our"), a service operated by Shenzhen NexusMake Technology Co., Ltd., collects, uses, and
        protects your personal information.
      </div>

      <!-- 条款列表 -->
      <section class="terms-list">
        <div
          class="term-item"
          v-for="(term, index) in terms"
          :key="index"
          :class="{ 'large-line-height': [0, 1, 2].includes(index) }">
          <!-- 条款标题 -->
          <div class="term-title" @click="toggleTerm(index)">
            <span class="term-number">{{ index + 1 }}.</span>
            <span class="term-heading">{{ term.title }}</span>
            <span class="toggle-icon" :class="{ expanded: term.expanded }">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </div>

          <!-- 条款内容（安全渲染） -->
          <div class="term-content" v-if="term.expanded" :class="{ expanding: term.expanding }">
            <div class="content-inner" v-text="term.content" v-html="term.content"></div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  // 返回上一页
  const handleBack = () => {
    router.back();
  };

  // 清理内容中的特殊字符和注释，防止解析错误
  const cleanContent = (content) => {
    // 移除HTML注释
    let cleaned = content.replace(/<!--[\s\S]*?-->/g, '');
    // 移除多余空白
    cleaned = cleaned.trim();
    // 转义可能引起问题的特殊字符
    return cleaned;
  };

  // 隐私政策条款数据（已清理）
  const terms = ref([
    {
      title: 'Information We Collect',
      content: cleanContent(`
      <ul class="term-sub-list">
        <li>- Account Information: When you register, we collect your username, email address, and password if any.</li>
        <li>- Profile Information: You may voluntarily add more information to your profile, such as a bio, username or avatar.</li>
        <li>- Content Information: We collect the content you create, including text prompts, uploaded images, and AI-generated artwork.</li>
        <li>- Financial Information: To process payouts, we collect your payment information (e.g., PayPal email). This information is handled by secure third-party payment processors.</li>
        <li>- Usage Data: We automatically collect information about how you interact with our Service, such as your IP address, browser type, and pages visited.</li>
      </ul>
    `),
      expanded: false,
      expanding: false,
    },
    {
      title: 'How We Use Your Information',
      content: cleanContent(`
      <ul class="term-sub-list">
        <li>- To provide and maintain the Service.</li>
        <li>- To process transactions and send you related information.</li>
        <li>- To communicate with you, including responding to your inquiries and sending service-related emails.</li>
        <li>- To personalize your experience and recommend content.</li>
        <li>- To monitor and analyze usage to improve the Service.</li>
        <li>- To enforce our Terms and prevent fraudulent activity.</li>
      </ul>
    `),
      expanded: false,
      expanding: false,
    },
    {
      title: 'How We Share Your Information',
      content: cleanContent(`
      <p class="term-paragraph">We do not sell your personal information. We may share your information only in the following circumstances:</p>

      <ul class="term-sub-list">
        <li>- Publicly: Your username, profile information, and public content are visible to others on the Service.</li>

        <li>- With Service Providers: We may share information with third-party vendors who perform services on our behalf. These vendors are bound by contractual obligations to keep personal information confidential and use it only for the purposes for which we disclose it to them. These providers include:
          <ul class="term-sub-sub-list">
            <li>- AI Feature Providers: To power certain features on our platform. Specifically:
              <ul class="term-sub-sub-list">
                <li>- Processor: fal – Features & Labels, Inc.</li>
                <li>- Privacy Policy: https://fal.ai/privacy</li>
                <li>- Data & Purpose: They process user-uploaded images (which you provide for this purpose) to provide AI-powered image stylization and generation services (e.g., in the Nex Lab).</li>
              </ul>
            </li>
          </ul>
        </li>

        <li>- For Legal Reasons: We may disclose your information if we believe in good faith that it is required by law, to respond to a legal process, or to protect the rights, property, and safety of Nexbie, our users, or the public.</li>
      </ul>
    `),
      expanded: false,
      expanding: false,
    },
    {
      title: 'Your Rights and Choices',
      content: cleanContent(
        `You can access and update your account information at any time. You may also delete your account, which will remove your personal data from our active systems.`
      ),
      expanded: false,
      expanding: false,
    },
    {
      title: 'Data Security',
      content: cleanContent(
        `We implement industry-standard security measures to protect your information. However, no method of transmission over the internet is 100% secure.`
      ),
      expanded: false,
      expanding: false,
    },
  ]);

  // 切换条款的展开/折叠状态
  const toggleTerm = (index) => {
    terms.value.forEach((term, i) => {
      if (i !== index) {
        term.expanded = false;
        term.expanding = false;
      }
    });

    const currentTerm = terms.value[index];
    currentTerm.expanded = !currentTerm.expanded;

    if (currentTerm.expanded) {
      currentTerm.expanding = true;
      setTimeout(() => {
        currentTerm.expanding = false;
      }, 300);
    }
  };
</script>

<style scoped>
  /* 保持原有样式不变 */
  .terms-container {
    width: 100%;
    min-height: 100vh;
    background-color: #f8f8f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 54px;
  }

  .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    padding: 0 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 100;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
  }

  .back-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin: 0;
    height: 100%;
  }

  .back-btn svg {
    margin-right: 8px;
    color: #f76b1b;
    flex-shrink: 0;
  }

  .back-text {
    transition: color 0.2s ease;
    flex-shrink: 0;
  }

  .back-btn:hover .back-text {
    color: #f76b1b;
  }

  .terms-content {
    padding: 0 20px 30px;
    max-width: 800px;
    margin: 0 auto;
  }

  .terms-update {
    font-size: 14px;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.8;
  }

  .terms-intro {
    font-size: 15px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 24px;
  }

  .terms-list {
    background-color: #fff;
    border-radius: 12px;
    padding: 10px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .term-item {
    border-bottom: 1px solid #f0f0f0;
  }

  .term-item:last-child {
    border-bottom: none;
  }

  .term-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .term-title:hover {
    background-color: #fafafa;
  }

  .term-number {
    font-weight: 600;
    color: #f76b1b;
    margin-right: 10px;
    font-size: 15px;
  }

  .term-heading {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #333;
  }

  .toggle-icon {
    color: #999;
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .toggle-icon.expanded {
    transform: rotate(180deg);
    color: #f76b1b;
  }

  .term-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  .content-inner {
    padding: 16px 24px;
    font-size: 14px;
    color: #333;
    line-height: 1.9;
  }

  .large-line-height .content-inner {
    line-height: 2.1;
  }

  .term-content.expanding {
    overflow: hidden;
  }

  .term-item:nth-child(1) .term-content {
    max-height: 600px;
  }
  .term-item:nth-child(2) .term-content {
    max-height: 500px;
  }
  .term-item:nth-child(3) .term-content {
    max-height: 800px;
  }
  .term-item:nth-child(4) .term-content {
    max-height: 300px;
  }
  .term-item:nth-child(5) .term-content {
    max-height: 300px;
  }

  .term-sub-list {
    margin: 10px 0 18px 0;
    padding-left: 20px;
  }

  .term-sub-list li {
    margin-bottom: 12px;
    line-height: 1.9;
  }

  .term-sub-sub-list {
    margin: 8px 0 8px 20px;
    padding-left: 20px;
  }

  .term-sub-sub-list li {
    margin-bottom: 8px;
    line-height: 1.9;
  }

  .term-paragraph {
    margin: 12px 0;
    line-height: 1.9;
  }

  @media (max-width: 375px) {
    .terms-container {
      padding-top: 50px;
    }

    .top-bar {
      height: 50px;
      padding: 0 16px;
    }

    .terms-content {
      padding: 0 16px 20px;
    }

    .terms-update {
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.7;
    }

    .terms-intro {
      font-size: 14px;
      line-height: 1.7;
    }

    .term-title {
      padding: 14px 16px;
    }

    .term-number {
      font-size: 14px;
      margin-right: 8px;
    }

    .term-heading {
      font-size: 14px;
    }

    .content-inner {
      padding: 14px 20px;
      font-size: 13px;
      line-height: 1.8;
    }

    .large-line-height .content-inner {
      line-height: 2;
    }

    .term-sub-list {
      padding-left: 16px;
    }

    .term-sub-sub-list {
      padding-left: 16px;
      margin-left: 16px;
    }
  }
</style>
